<template>
    <div class="advertising">
        <h5>
            <span>广告管理</span>
            <span class="add my-background" @click="addClick(0)">发布</span>
        </h5>
        <div class="advertising-top">
            <span class="title">*分类</span>
            <el-select v-model="valueLevel1" placeholder="全部">
                <el-option v-for="item in place"  :key="item.id"  :label="item.placeName"  :value="item.id"></el-option>
            </el-select>
        </div>
        <div class="table-box">
			<div style="margin-bottom:15px;padding-left:2px;">
				<span style="color:rgb(70 126 251);font-size:14px;" @click="toggleSelection">批量删除</span>
			</div>
            <div class="mytable">
                <el-table ref="multipleTable"  @selection-change="handleSelectionChange" max-height="500px"  :data="advertisingData" border style="width: 100%" fit >
                    <el-table-column  type="selection"  width="40"></el-table-column>
                    <!-- <el-table-column  prop="id" label="ID" sortable width="60"></el-table-column> -->
                    <el-table-column  prop="sort" label="排序" sortable min-width="60"></el-table-column>
                    <el-table-column  prop="positiontypename" label="分类"></el-table-column>
                    <el-table-column  prop="jumptypename" label="二级分类" min-width="90"></el-table-column>
                    <el-table-column  prop="brandObjname" label="所属类型" min-width="95"></el-table-column>
                    <el-table-column  prop="title" label="标题" min-width="95"></el-table-column>
                    <el-table-column  prop="detailid" label="详情id" min-width="65"></el-table-column>
                    <el-table-column  label="图片" min-width="255">
                        <template class="img-box"  slot-scope="scope">
                            <img :src="scope.row.image" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column class-name="time"  label="加入时间" min-width="90">
                        <template  slot-scope="scope">
                            <span>{{scope.row.createTime[0]}}</span>
                            <span>{{scope.row.createTime[1]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="70">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.showState==2">已启用</span>
                            <span v-else>禁用</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作" fixed='right'>
                        <template  slot-scope="scope">
                            <el-button  type="text" size="small" @click="disableClick(scope.row)" style="margin-right: 10px;">
                                <span v-if="scope.row.showState==2">禁用</span>
                                <span v-else>启用</span>
                            </el-button>
                            <el-button  type="text" size="small" @click="editClick(scope.row)" style="margin-right: 10px;margin-left: 0px;">编辑</el-button>
                            <el-button  type="text" size="small" @click="handleClick(scope.row)" style="margin-right: 10px;margin-left: 0px;">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="mask" v-show="masknum">
            <div class="content">
                <p class="content-top">
                    <span>添加广告</span>
                    <span @click="cancelClick"><img src="../assets/img/error.png" alt=""></span>
                </p>
                <el-button style="display:none;" type="text" @click="open"></el-button>
                <ul class="content-items">
                    <li class="item">
                        <span>所属分类:</span>
						<el-select v-model="addpositiontype" placeholder="请选择" @blur="selectBular()" @focus="selectfocus()">
							<el-option v-for="item in place1"  :key="item.id"  :label="item.placeName"  :value="item.id"></el-option>
						</el-select>
						<el-select v-model="addjumptype" placeholder="请选择" @blur="selectBular()" @focus="selectfocus()">
							<el-option v-for="items in brandOptions"  :key="items.id"  :label="items.names"  :value="items.id"></el-option>
						</el-select>
                    </li>
                    <li class="item" v-if="addjumptype==3||addjumptype==4">
                        <span>所属类型:</span>
						<el-select v-model="addtype" placeholder="请选择" @blur="selectBular()" @focus="selectfocus()">
							<el-option v-for="item in brandObj[addjumptype]"  :key="item.index"  :label="item.childName"  :value="item.index"></el-option>
						</el-select>
                    </li>
                    <li class="item">
                        <span>广告标题:</span>
						<input type="text" v-model="addtitle" @blur="selectBular()" @focus="selectfocus()">
                    </li>
                    <li class="item">
                        <span>显示排序:</span>
						<input type="text" v-model="addsort"  @blur="selectBular()" @focus="selectfocus()">
                    </li>
                    <li class="item" v-if="addjumptype==1||addjumptype==2">
                        <span>链接地址:</span>
						<input type="text" v-model="addurl"  @blur="selectBular()" @focus="selectfocus()">
                    </li>
                    <li class="item" v-if="addjumptype==3||addjumptype==4">
                        <span>详情ID:</span>
						<input type="text" v-model="adddetailid"  @blur="selectBular()" @focus="selectfocus()">
                    </li>
                    <li class="item" v-if="addjumptype==2">
                        <span>原始ID:</span>
						<input type="text" v-model="adddetailid"  @blur="selectBular()" @focus="selectfocus()">
                    </li>
                    <li class="item">
                        <span>显示状态:</span>
						<el-radio v-model="addshowState" label="2">启用</el-radio>
  						<el-radio v-model="addshowState" label="1">禁用</el-radio>
                    </li>
                    <li class="item" v-if="addjumptype==1||!addjumptype" style="height:40px;"></li>
					<li class="item">
                        <span>广告图片:</span>
                        <div>
                            <div style="display:flex;">
                                <div class="item-img-box" v-if="imgedit">
                                    <img :src="imgedit" alt="">
                                    <span @click="imgeditClick">×</span>
                                </div>
                                <el-upload v-else
                                    class="upload-demo"
                                    action="uploadurl"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove"
                                    :before-remove="beforeRemove"
                                    multiple
                                    :limit="1"
                                    :on-exceed="handleExceed"
                                    :before-upload="beforeUpload"
                                    :http-request="uploadHttp"
                                    :file-list="fileList">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible"  append-to-body=false>
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </div>
                            <div slot="tip" class="el-upload__tip">图片大小710*304px，图片大小小于5MB，支持jpg:.gif:.png;.jpeg格式的图片</div>
                        </div>
                    </li>
                </ul>
                <div class="content-bottom">
                    <span @click="cancelClick">取消</span>
                    <span v-if="btnsurenum" @click="uploadClick">确定</span>
                    <span v-else style="background:#dfe7f0;border:0;">确定</span>
                </div>
            </div>
        </div>
        <!-- <el-pagination class="pag"  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage4"  :page-sizes="[5, 10, 15, 20]"  :page-size="5"  layout="total, sizes, prev, pager, next, jumper"  :total=total></el-pagination> -->
    </div>
</template>

<script>
export default {
    data(){
        return{
            btnsurenum:false,
            masknum:false,
            openNum:0,
            valueLevel1:'',
            advertisingData: [],//协议数据
            idList:[],//删除id列表
            //编辑页面数据
            id:'',//编辑页面id
            imgedit:'',
            //添加
			addpositiontype:'',//添加分类一
			addjumptype:'',//添加分类二
			addtype:'',//添加所属类型
            addtitle:'',//添加标题
            addsort:'',//添加排序
            addurl:'',//添加url
            adddetailid:'',//添加详情id
            addshowState:'2',//添加状态
            //上传图片
            isLt2M:'',
			fileList:[],
            fileUpUrlList:'',
            dialogImageUrl: '',
            dialogVisible: false,
			//分类
			place: [
				{
					id: 0,
					placeName: '全部'
				}, 
				{
					id: 1,
					placeName: '首页'
				}, 
				{
					id: 2,
					placeName: '我的'
				}, 
				{
					id: 3,
					placeName: '社区'
				}, 
				{
					id: 4,
					placeName: '突突到家'
				}
			],
            //分类--无全部
			place1: [
				{
					id: 1,
					placeName: '首页'
				}, 
				{
					id: 2,
					placeName: '我的'
				}, 
				{
					id: 3,
					placeName: '社区'
				}, 
				{
					id: 4,
					placeName: '突突到家'
				}
			],
			//二级分类
			brandOptions: [
				{
					id: 1,
					names: 'url'
				},
				{
					id: 2,
					names: '小程序'
				},
				{
					id: 3,
					names: '固定模块'
				},
				{
					id: 4,
					names: '固定详情'
				}
			],
			//所属类型
			brandObj: {
					1: [],
					2: [],
					3: [{
							index: 1,
							childName: '直播模块'
						},
						{
							index: 2,
							childName: '外卖模块'
						},
						{
							index: 3,
							childName: '突突模块'
						},
						{
							index: 4,
							childName: '酒店模块'
						},
					],
					4: [{
							index: 5,
							childName: '直播详情'
						},
						{
							index: 6,
							childName: '外卖详情'
						},
						{
							index: 7,
							childName: '突突到家详情'
						},
						{
							index: 8,
							childName: '酒店详情'
						},
					],
			},
            //分页
            total:102,
            currentPage4: '',
        }
    },
    mounted(){
        this.getadvertisingData()

    },
    methods:{
        open(text) {
            this.$alert(text, '提示', {
                confirmButtonText: '确定',
            });
        },
        //失去焦点验证
        selectBular(){
            setTimeout(() => {
                this.btnsurenum=true
            }, 500);
        },
        //获取焦点验证
        selectfocus(){
            this.btnsurenum=false
        },
        //获取问题列表
        getadvertisingData(){
			var url='/operate/poster/selectAll'
			if(this.valueLevel1){
				url='/operate/poster/selectAll?positiontype='+this.valueLevel1
			}
            this.axios({
                url:url,
                method:'get',
                headers: {'Content-Type': 'application/json'}
            }).then(res=>{
                this.advertisingData=res.data.data.records
				this.advertisingData.forEach(e => {
					this.place.forEach(ele => {
						if(ele.id==e.positiontype){
							e.positiontypename=ele.placeName
						}
					});
					this.brandOptions.forEach(ele=>{
						if(ele.id==e.jumptype){
							e.jumptypename=ele.names
						}
					})
					this.brandObj[e.jumptype].forEach(ele=>{
						if(ele.index==e.type){
							e.brandObjname=ele.childName
						}
					})
					e.createTime=e.createTime.split(/[T.]/g)
				});
            })
        },
        //添加
        addClick(row){
			this.masknum=true
        },
        //删除
        handleClick(row){
            this.axios.delete('/operate/poster/delete?idList='+row.id).then(res=>{
                this.getadvertisingData()
            })
        },
        //禁用-启用切换
        disableClick(row){
            var poster={
                "createTime": "",
                "detailid": 0,
                "id": 0,
                "image": "",
                "jumptype": 0,
                "positiontype": 0,
                "showState": 0,
                "sort": 0,
                "title": "",
                "type": 0,
                "url": ""
            }
            poster.id=row.id
            poster.detailid=row.detailid
            poster.image=row.image
            poster.jumptype=row.jumptype
            poster.positiontype=row.positiontype
            poster.sort=row.sort
            poster.title=row.title
            poster.type=row.type
            poster.url=row.url
            if(row.showState==1){
                poster.showState=2
            }else{
                poster.showState=1
            }
            this.axios({
                url:'/operate/poster/update',
                method:'put',
                data:JSON.stringify(poster),
                headers: {'Content-Type': 'application/json;charset=UTF-8'}
            }).then(res=>{
                this.cancelClick()
                this.getadvertisingData()
            })
        },
        //编辑
        editClick(row){
            this.masknum=true
            this.openNum=1
            this.id=row.id
            this.imgedit=row.image
            this.addpositiontype=row.positiontype
            this.addjumptype=row.jumptype
            this.addtype=row.type
            this.addtitle=row.title
            this.addsort=row.sort
            this.addurl=row.url
            this.adddetailid=row.detailid
            this.addshowState=row.showState.toString ()
            this.fileUpUrlList=row.image
        },
        //删除编辑自带图片
        imgeditClick(){
            this.imgedit=''
        },
        //批量删除
        toggleSelection() {
            this.axios.delete('/operate/poster/delete?idList='+this.idList).then(res=>{
                this.getadvertisingData()
            })
        },
        //多选的数据列表
        handleSelectionChange(val) {
            this.idList=[]
            val.forEach(e => {
                this.idList.push(e.id)
            });
        },
		//删除图片
        handleRemove(file, fileList) {
        },
        handlePictureCardPreview(file) {
            console.log(file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //提示上传文件个数
        handleExceed(files, fileList) {
            this.$message.warning("只能上传一个文件，请先删除，再上传新文件！");
        },
        //删除提示
        beforeRemove(file, fileList) {
            if(!this.isLt2M){
                return this.$alert('只能上传jpg/png文件，且不超过5MB', '图片上传限制', {confirmButtonText: '确定',});
            }
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //提示上传文件大小
        beforeUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 5;
            this.isLt2M=isLt2M
            if (!isLt2M) {
                // this.common.errorTip('上传文件大小不能超过 2MB!');
                // this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        uploadHttp(params){
            this.selectfocus()
            var  formData = new FormData();
            formData.append('file', params.file);
            this.axios.post('https://jbhotel.cklock.cn/operate/upload/file', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                this.fileUpUrlList=res.data.data
                this.selectBular()
            })
        },
        //取消
        cancelClick(){
            this.masknum=false
            this.btnsurenum=false
            this.addpositiontype=''
            this.addjumptype=''
            this.addtype=''
            this.addtitle=''
            this.addsort=''
            this.addurl=''
            this.adddetailid=''
            this.addshowState='2'
            this.addimage=''
            this.imgedit=''
            this.fileUpUrlList=''
            this.fileList=[]
            this.id=''
        },
        //上传
        uploadClick(){
            if(this.addpositiontype){
                var poster={
                    "createTime": "",
                    "detailid": 0,
                    "id": 0,
                    "image": "",
                    "jumptype": 0,
                    "positiontype": 0,
                    "showState": 0,
                    "sort": 0,
                    "title": "",
                    "type": 0,
                    "url": ""
                }
                poster.detailid=this.adddetailid
                if(this.imgedit){
                    poster.image=this.imgedit
                }else{
                    poster.image=this.fileUpUrlList
                }
                poster.jumptype=this.addjumptype
                poster.positiontype=this.addpositiontype
                poster.showState=this.addshowState
                poster.sort=this.addsort
                poster.title=this.addtitle
                poster.type=this.addtype
                poster.url=this.addurl
                if(this.id){
                    poster.id=this.id
                    this.axios({
                        url:'/operate/poster/update',
                        method:'put',
                        data:JSON.stringify(poster),
                        headers: {'Content-Type': 'application/json;charset=UTF-8'}
                    }).then(res=>{
                        this.cancelClick()
                        this.getadvertisingData()
                    })
                }else{
                    this.axios({
                        url:'/operate/poster/insert',
                        method:'post',
                        data:JSON.stringify(poster),
                        headers: {'Content-Type': 'application/json;charset=UTF-8'}
                    }).then(res=>{
                        this.cancelClick()
                        console.log(res.data)
                        this.getadvertisingData()
                    })
                }
            }
        },
        //分页
        handleSizeChange(val) {
        },
        handleCurrentChange(val) {
        }
    },
    watch:{
        valueLevel1(){
            this.getadvertisingData()
        },
        addjumptype(){
            if(!this.openNum){
                this.addtype=''
                this.adddetailid=''
                this.addurl=''
            }else{
                this.openNum=0
            }
        },
        //正则验证排序
        addsort(){
            var reg=/^[0-9]*$/
            if(!reg.test(this.addsort)){
                this.open('请输入数字')
                this.addsort=''
            }
        },
    }
}
</script>

<style scoped>
.advertising{
    min-height: calc(100vh - 100px);
    position: relative;
}
.advertising>h5{
    display: flex;
    justify-content: space-between;
}
.advertising>h5 .add{
    display: inline-block;
    font-size: 15px;
    width: 62px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    color: #fff;
    /* background: rgb(110, 163, 231); */
}
.table-box{
    margin-top: 35px;
}
/* .mytable{
    height: calc(100vh - 400px);
	overflow: auto;
} */
table .time span{
	display: inline-block;
	margin: 0 2px;
}
table .img-box{
	width: 100%;
}
.cell img{
	width: 100%;
}
.advertising-top{
    margin-top: 50px;
}
.title{
    display: inline-block;
    text-align: right;
    /* width: 90px; */
    margin-right: 15px;
}
.btn{
    height: 38px;
    line-height: 36px;
    margin-left: 30px;
    font-size: 15px;
}
.button{
    margin-left:40px;
    border:0;
    padding:0 25px;
    height: 37px;
    line-height: 37px;
}
.advertising-top input{
    width: 21
    
    0px;
    padding-left: 15px;
}
.advertising-top input::-webkit-input-placeholder {
    color: #c5c9cf;
    font-size: 14px;
}
.pag{
    /* margin-top: 50px; */
    position: absolute;
    bottom: 60px;
}
</style>

<style scoped>
/* 遮罩层 */
.mask{
    width: 100vw;
    height: 100vh;
    /* color: #555; */
    background: rgba(51, 51, 51, 0.692);
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
}
.mask .content{
    width: 750px;
    height: 600px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30PX;
}
.mask .content-top{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.mask .content-top img{
    width: 25px;
}
.content-items{
    margin: 20px;
}
.content-items .item{
    margin:12px 10px;
	display: flex;
    align-items: center;
}
.content-items .item span:first-child{
    display: inline-block;
    width: 100px;
}
/* 按钮 */
.content-bottom{
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid #ddd;
    position: absolute;
    width: calc(100% - 60px);
    bottom: 30px;
}
.content-bottom span{
    border-radius: 2px;
    padding: 5px 15px;
    border: 1px solid #ddd;
    color: #444;
}
.content-bottom span:last-child{
    color: #fff;
    /* background: #dfe7f0 ; */
    background: #1890FF ;
    border: 1px solid #1890FF;
    margin-left: 18px;

}
</style>

<style>
.advertising .upload-demo{
    display: flex;
}
.advertising .upload-demo .el-upload--picture-card{
	width: 90px;
	height: 90px;
	line-height: 90px;
    margin-left: 10px;
}
.advertising .item-img-box {
    position: relative;
}
.advertising .item-img-box img{
	height: 90px;
}
.advertising .item-img-box span{
    position: absolute;
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    font-size: 13px;
    top: 2px;
    right: 2px;
    cursor:pointer;
}
.advertising .upload-demo .el-upload-list--picture-card .el-upload-list__item{
	width: 100%;
	height: 90px;
}
.advertising .el-select{
    margin-right: 10px;
}
.advertising label{
    margin-bottom: 0;
}
</style>